<!-- pages/my/index.vue -->
<script setup lang="ts">
import { userInfoApi } from '@/apis/user';
import type { UserData } from '@/types/user';
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'

const store = useUserStore()
// 1. 调用接口获取数据
const userInfo = ref<UserData>({} as UserData)
const getUserData = async ()=>{
  const res = await userInfoApi()
  userInfo.value = res
}
getUserData()
// 2. 退出登录
const logOut = async ()=>{
 const res = await uni.showModal({
    title:'温馨提示',
    content: '您确定要退出登录吗?',
    confirmColor: '#ff0000'
  })
  if(res.confirm){
    // 2.1 清除token
    store.setToken('')
    // 2.2 去登录页
    uni.redirectTo({
      url:'/pages/login/index',
    })
  }
  
}
</script>
<template>
  <scroll-view scroll-y v-if="userInfo.id">
    <view class="my-page">
      <!-- 用户资料（头像&昵称） -->
      <view class="user-profile">
        <image class="user-avatar" :src="userInfo.avatar"></image>
        <view class="user-info">
          <text class="nickname">{{ userInfo.account }}</text>
          <text class="iconfont icon-edit"></text>
        </view>
      </view>
      <!-- 用户数据 -->
      <view class="user-data">
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.collectionNumber }}</text>
          <text class="data-label">收藏</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.likeNumber }}</text>
          <text class="data-label">关注</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.score }}</text>
          <text class="data-label">积分</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.couponNumber }}</text>
          <text class="data-label">优惠券</text>
        </navigator>
      </view>
      <!-- 问诊医生 -->
      <custom-section v-if="userInfo.consultationInfo.length > 0" :custom-style="{ paddingBottom: '20rpx' }" title="问诊中">
        <swiper class="uni-swiper" indicator-active-color="#2CB5A5" indicator-color="#EAF8F6" indicator-dots>
          <swiper-item v-for="doctor in userInfo.consultationInfo" :key="doctor.id">
            <view class="doctor-brief">
              <image class="doctor-avatar" :src="doctor.avatar" />
              <view class="doctor-info">
                <view class="meta">
                  <text class="name">{{ doctor.name }}</text>
                  <text class="title">{{ doctor.depName }} | {{ doctor.positionalTitles }}</text>
                </view>
                <view class="meta">
                  <text class="tag">{{ doctor.gradeName }}</text>
                  <text class="hospital">{{ doctor.hospitalName }}</text>
                </view>
              </view>
              <navigator class="doctor-contcat" hover-class="none" url=" "> 进入咨询 </navigator>
            </view>
          </swiper-item>
        </swiper>
      </custom-section>
      <!-- 药品订单 -->
      <custom-section show-arrow title="药品订单">
        <!-- v-slot:right 简写 #right -->
        <template #right>
          <navigator hover-class="none" url=" "> 全部订单 </navigator>
        </template>
        <view class="drug-order">
          <navigator hover-class="none" url=" ">
            <uni-badge :text="userInfo.orderInfo.paidNumber" :offset="[3, 3]" absolute="rightTop">
              <image src="/static/images/order-status-1.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">待付款</text>
          </navigator>
          <navigator hover-class="none" url=" ">
            <uni-badge :text="userInfo.orderInfo.receivedNumber" :offset="[3, 3]" absolute="rightTop">
              <image src="/static/images/order-status-2.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">待发货</text>
          </navigator>
          <navigator hover-class="none" url=" ">
            <uni-badge :text="userInfo.orderInfo.shippedNumber" :offset="[3, 3]" absolute="rightTop">
              <image src="/static/images/order-status-3.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">待收货</text>
          </navigator>
          <navigator hover-class="none" url=" ">
            <uni-badge :text="userInfo.orderInfo.finishedNumber" :offset="[3, 3]" absolute="rightTop">
              <image src="/static/images/order-status-4.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">已完成</text>
          </navigator>
        </view>
      </custom-section>
      <!-- 快捷工具 -->
      <custom-section title="快捷工具">
        <uni-list :border="false">
          <uni-list-item :border="false" title="我的问诊" show-arrow show-extra-icon :extra-icon="{
            type: 'icon-symbol-tool-01',
          }"  to="/subpkg_consult/order_list/index"/>
          <uni-list-item :border="false" title="我的处方" show-arrow show-extra-icon :extra-icon="{
            type: 'icon-symbol-tool-02',
          }" />


             
            <uni-list-item to="/subpkg_archive/list/index" :border="false" title="家庭档案" show-arrow show-extra-icon :extra-icon="{
              type: 'icon-symbol-tool-03',
            }" />
          


          <uni-list-item :border="false" title="地址管理" show-arrow show-extra-icon :extra-icon="{
            type: 'icon-symbol-tool-04',
          }" />
          <uni-list-item :border="false" title="我的评价" show-arrow show-extra-icon :extra-icon="{
            type: 'icon-symbol-tool-05',
          }" />
          <uni-list-item :border="false" title="官方客服" show-arrow show-extra-icon :extra-icon="{
            type: 'icon-symbol-tool-06',
          }" />
          <uni-list-item :border="false" title="设置" show-arrow show-extra-icon :extra-icon="{
            type: 'icon-symbol-tool-07',
          }" />
        </uni-list>
      </custom-section>
      <!-- 退出登录 -->
      <view class="logout-button"  @click="logOut">退出登录</view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import './index.scss';
</style>
